{extend name="layout/detail" /}
{block name="content"}
<div class="td-content-wrap p20">
    <div class="td-content-header">
        <h1 class="main-title">用户管理</h1>
        <div class="simple_search">
            <form id="form_search" method="post" action="">
                <div class="layui-input-inline">
                    <input type="text" id="username" name="username" class="layui-input">
                    <a class="add-on" onclick="form_search();"><i class="fa fa-search"></i></a>
                </div>
            </form>
        </div>
    </div>
    <hr>
    <div class="panel no-border">
        <a class="layui-btn none" onclick="go_return_url();">返回</a>
        <span class="mid"></span>
        <a class="layui-btn none" onclick="add();">添加</a>
    </div>
    <hr>
    <table id="data_table" lay-filter="data_table"></table>
</div>
{/block}

{block name="script"}
<script>
    layui.use(['data_table'], function () {
        let $ = layui.jquery;
        let data_table = layui.data_table;

        // 记录返回地址
        set_return_url();

        // 页面用到方法
        let fn = {
            add: function (data) {
                window.open('{:url("add")}', '_self');
            },
            read: function (data) {
                window.open('{:url("read")}?id=' + data.id, '_self');
            },
            edit: function (data) {
                window.open('{:url("edit")}?id=' + data.id, '_self');
            },
            is_top: function (data) {
                popup_open('{:url("is_top")}?id=' + data.id, 630, 350);
            },
            tag: function (data) {
                popup_open('{:url("tag")}?id=' + data.id, 630, 350);
            },
            article_category: function () {
                window.open('{:url("article_category/index")}', '_self');
            },
            del: function (data) {
                layer.msg('确定要删除吗?', {
                    time: 0,
                    btn: ['确定', '取消'],
                    yes: function (index) {
                        var vars = 'id=' + data.id;
                        $.get("{:url('del')}", vars, function (res) {
                            if (res.code) {
                                layer.msg(res.msg, {
                                    time: 1200
                                }, function () {
                                    location.reload(true);
                                });
                            } else {
                                layer.msg(res.msg);
                            }
                        });
                    },
                    no: function (index) {
                        layer.close(index);
                    }
                });
            },
        };

        win_exp(fn);

        let cols = [[
            {
                width: 80,
                title: '用户ID',
                field: 'id',
                align: 'center',
            },
            {
                width: 160,
                title: '用户头像',
                field: 'avatar',
                align: 'center',
                templet: function(d) {
                    return '<div class="pic-wrap avatar-wrap"><img class="pic-img avatar-img" src="' + d.avatar + '"></div>';
                },
            },
            {
                width: 120,
                title: '用户性别',
                field: 'sex',
                align: 'center',
                templet: function(d) {
                    return d.sex == 1 ? '男' : '女';
                },                
            },
            {
                title: '用户姓名',
                field: 'username',
                align: 'center',
            },
            {
                title: '用户手机号',
                field: 'mobile',
                align: 'center',
            },
        ]];

        data_table.config.cols = cols;
        data_table.render();

    });
</script>
{/block}